<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    
    
    <ui:composition template="template.xhtml">
           <ui:define name="top">
                <ui:include src="topMenu.xhtml"/>
           </ui:define>
           <ui:define name="content">
                  <div id="createCourse">
                      
          <c:if test="${coursesMB.isSuccess()}">
                              <div class="alert alert-success">
                                  <button type="button" class="close" data-dismiss="alert">x</button>
                                  Curso creado exitosamente
                                  <script>
                                      $(document).ready(function() {
                                          $('input[type="text"]').val('');
                                      });
                                      
                                  </script>
                              </div>
              </c:if>            
          <h2>Crear Curso</h2>
          <h:form>
            <h:outputText value="Nombre:"/>
            <br/>
            <h:inputText class="span6" value="#{coursesMB.name}"/>
            <br/>
            <!--Colocar select con las categorias-->
            <h:outputText value="Categoría:"/>
            <br/>
            <h:selectOneMenu id="listCategories" value="#{coursesMB.categoryVO}" converter="#{catergoryVOConverter}" >
                <f:selectItems value="#{coursesMB.loadCategories()}"/>
            </h:selectOneMenu>
            <br/>
            <script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,undo,redo,|,image,|,link",
        theme_advanced_buttons2 : "formatselect,fontselect,fontsizeselect,|,forecolor,backcolor",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

        

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
                username : "Some User",
                staffid : "991234"
        }
});
</script>
            <h:inputTextarea class="span6" value="#{coursesMB.description}" id="description">Descripcion del curso:</h:inputTextarea>
            <h:commandButton value="Guardar" class="btn btn-info" action="#{coursesMB.createCourse()}"/>
          </h:form>
        </div>     
           </ui:define>
</ui:composition>
   
</html>

